<ui:composition template="/dynamic/layout/login_layout.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

	<ui:define name="content">
		<style>
label {
	width: 100px;
}

p {
	margin-bottom: 15px;
}

input {
	margin-bottom: 15px;
}

form {
	width: 550px;
}
</style>
		<div id="panel" style="height: 550px">
			<div id="panel_contents"></div>

			<div>
				<h:form id="loginForm" prependId="false"
					style="background: #ececec !important; margin-top: 40px; font-size:15px;">
					<p>
						<label>Login:</label>
						<p:inputText id="username" required="true"
							styleClass="login_input_long" label="Login"
							requiredMessage="Login jest wymagany!"
							validatorMessage="Login musi być dłuższy niż 4 znaki!"
							value="#{userMBean.registrationForm.username}">
							<f:ajax event="blur" render="usernameM" />
							<f:validateLength minimum="5" />
						</p:inputText>
						<h:message id="usernameM" for="username" style="color:red"
							showDetail="true" showSummary="true" tooltip="true" />
					</p>

					<p>
						<label>Hasło:</label>
						<p:password id="password" label="Hasło" required="true"
							styleClass="login_input_long"
							requiredMessage="Hasło jest wymagane"
							value="#{userMBean.registrationForm.pass}" match="password2"
							feedback="true" promptLabel="Proszę podać hasło"
							weakLabel="Słabe" goodLabel="Średnie" strongLabel="Mocne" />
						<h:message for="password" style="color:red" showDetail="true"
							showSummary="true" tooltip="true" title="Hasło jest wymagane" />
					</p>

					<p>
						<label>Powtórz hasło:</label>
						<p:password id="password2" label="Powtorzenie hasła"
							required="true" styleClass="login_input_long"
							requiredMessage="Hasło jest wymagane"
							value="#{userMBean.registrationForm.pass}" />
						<h:message for="password2" style="color:red" showDetail="true"
							showSummary="true" tooltip="true" />
					</p>

					<p>
						<label>Imie:</label>
						<p:inputText id="name" required="true"
							styleClass="login_input_long" label="Imie"
							requiredMessage="Login jest wymagany."
							validatorMessage="Imie musi być dłuższe niż 2 znaki!"
							value="#{userMBean.registrationForm.name}">
							<f:ajax event="blur" render="nameM" />
							<f:validateLength minimum="3" />
						</p:inputText>
						<h:message id="nameM" for="name" style="color:red"
							showDetail="true" showSummary="true" tooltip="true" />
					</p>

					<p>
						<label>Nazwisko:</label>
						<p:inputText id="secondName" required="true"
							styleClass="login_input_long" label="Nazwisko"
							requiredMessage="Nazwisko jest wymagane."
							value="#{userMBean.registrationForm.secondName}"
							validatorMessage="Nazwisko musi być dłuższe niż 2 znaki!">
							<f:ajax event="blur" render="secondNameM" />
							<f:validateLength minimum="3" />
						</p:inputText>
						<h:message id="secondNameM" for="secondName" style="color:red"
							showDetail="true" showSummary="true" tooltip="true" />
					</p>

					<p>
						<label>Telefon:</label>
						<p:inputText id="phone" styleClass="login_input_long"
							label="Telefon" value="#{userMBean.registrationForm.phone}"
							validatorMessage="Telefon musi mieć conajmniej 6 znaków!">
							<f:ajax event="blur" render="phoneM" />
							<f:validateLength minimum="6" />
						</p:inputText>
						<h:message id="phoneM" for="phone" style="color:red"
							showDetail="true" showSummary="true" tooltip="true" />
					</p>

					<p>
						<label>Email:</label>
						<p:inputText id="email" required="true"
							styleClass="login_input_long" label="Email"
							requiredMessage="Email jest wymagany."
							value="#{userMBean.registrationForm.email}"
							validatorMessage="Niepoprawny email!">
							<f:ajax event="blur" render="emailM" />
							<f:validateRegex
								pattern="^[_A-Za-z0-9-\+]+(\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,})$" />
						</p:inputText>
						<p:watermark for="email" value="Email Address" />
						<h:message id="emailM" for="email" style="color:red"
							showDetail="true" showSummary="true" tooltip="true" />
					</p>

					<p>
						<label>Data urodzenia:</label>
						<p:calendar id="birthDate" label="Data urodzenia"
							value="#{userMBean.registrationForm.dateOfBirth}" required="true"
							requiredMessage="Data urodzenia jest wymagana."
							pattern="dd-MM-yyyy">
							<f:convertDateTime pattern="dd-MM-yyyy" />
						</p:calendar>
						<h:message for="birthDate" style="color:red" showDetail="true"
							showSummary="true" tooltip="true" />
					</p>

					<p:commandLink id="register" type="submit"
						action="#{userMBean.register}" update="loginForm">
						<img src="static/images/p_rejsetruj.png" alt="logowanie" />
					</p:commandLink>
				</h:form>
			</div>
		</div>
		<div class="panel_button" style="display: visible;">
			<a href="login.do"> <img src="static/images/back_button.png"
				alt="logownie" /> Logowanie
			</a>
		</div>
	</ui:define>
</ui:composition>